import {Avatar, Divider, List, Skeleton, Drawer} from 'antd';
import React, {useEffect, useState} from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import {JavaScriptListAPI} from "@/api/modules/JavaScript";
import type {DrawerProps, RadioChangeEvent} from 'antd';
import 'antd/dist/antd.css';
import './index.less'
// import { Button, , Radio, Space } from 'antd';

interface DataType {
    name: string,
    context: any

}

import avatar from '/src/assets/images/avatar.png'

const This = () => {
    //添加loading加载
    const [loading, setLoading] = useState(false);
    //获取list数据
    const [data, setData] = useState<DataType[]>([]);
    //控制抽屉
    const [open, setOpen] = useState(false);
    //抽屉数据
    const [drawerObject, setDrawerObject] = useState<DataType>({name: '', context: ''})

    const loadMoreData = async () => {
        if (loading) {
            return;
        }
        setLoading(true);
        const data = await JavaScriptListAPI()
        setData(data)
        setLoading(false);
        console.log(data)
    }

    const clickListItem = (item: DataType) => {
        setOpen(true);
        setDrawerObject(item)
    }
    const onClose = () => {
        setOpen(false);
    };
    useEffect(() => {
        loadMoreData();
    }, []);
    return (
        <div>
            {/*抽屉*/}
            <Drawer
                width={700}
                visible={open}
                title={drawerObject?.name}
                closable={false}
                onClose={onClose}
                open={open}
                bodyStyle={{paddingBottom: 80}}
            >
                <div dangerouslySetInnerHTML={{__html: drawerObject?.context}}/>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Drawer>
            <div
                id="scrollableDiv"
                style={{
                    overflow: 'auto',
                    padding: '0 16px',
                    border: '1px solid rgba(140, 140, 140, 0.35)',
                }}
            >
                <InfiniteScroll
                    dataLength={data.length}
                    next={loadMoreData}
                    hasMore={data.length < 10}
                    loader={<Skeleton avatar paragraph={{rows: 1}} active/>}
                    endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
                    scrollableTarget="scrollableDiv"
                >
                    <List
                        dataSource={data}
                        renderItem={(item, index) => (
                            <List.Item key={item.name}>
                                <List.Item.Meta
                                    avatar={<Avatar src={avatar}/>}
                                    title={<a>{index + 1}.{item.name}</a>}
                                    description={item.name}
                                />
                                <div onClick={() => clickListItem(item)}>More</div>
                            </List.Item>
                        )}
                    />
                </InfiniteScroll>
            </div>
        </div>)
}
export default This
